<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>优惠券详情</span>
      <div>
        
        <el-button type="primary" @click="joinexportlist()">查看核销记录</el-button>
        <el-button type="primary" @click="joinexportlist1()">导出任务列表</el-button>
        <el-button type="primary" @click="merchantexcel()"><i class="el-icon-download"></i>下载优惠券码</el-button>
        <el-button @click="chengecz"  icon="el-icon-refresh"></el-button>
      </div>
    </div>


    <div class="container">

      <div class="statistical">
        <div class="statisticalitem">
          <div class="chengeflex">
            <div class="chengeleft">优惠券名称</div>
            <div class="chengeright">{{list.couponTypeName}}</div>
          </div>
          <div class="chengeflex">
            <div class="chengeleft">批次号</div>
            <div class="chengeright">{{list.batchCode}}</div>
          </div>
          <div class="chengeflex">
            <div class="chengeleft">优惠券通道</div>
            <div class="chengeright">{{list.channelName}}</div>
          </div>
          <div class="chengeflex">
            <div class="chengeleft">优惠券类型</div>
            <div class="chengeright">{{list.concessions == 1?'满减券':list.concessions == 1?'折扣券':'随机金额券'}}</div>
          </div>
        </div>
        <div class="statisticalitem">

          <div class="chengeflex">
            <div class="chengeleft">优惠内容</div>
            <div class="chengeright">121</div>
          </div>
          <div class="chengeflex">
            <div class="chengeleft">指定商户</div>
            <div class="chengeright">{{list.merchantName}}</div>
          </div>
          <div class="chengeflex">
            <div class="chengeleft">门店类型</div>
            <div class="chengeright">{{list.limitType == 1?'不限制门店':list.limitType == 1?'部分门店可用':'部分门店不可用'}}</div>
          </div>
          <div class="chengeflex">
            <div class="chengeleft">有效时间</div>
            <div class="chengeright"><div>{{list.startTime}}</div><div>{{list.endTime}}</div></div>
          </div>
        </div>

        <div class="statisticalitem">
          <div class="chengeflex">
            <div class="chengeleft">创建时间</div>
            <div class="chengeright">{{list.createTime}}</div>
          </div>
          <div class="chengeflex">
            <div class="chengeleft">门店名称</div>
            <div class="chengeright">
              <span v-for="item in list.limitCoupon" :key="item">{{item}}；</span>
            </div>
          </div>
        </div>
         
      </div>

      <div class="statisticalss">
        <div class="chengetitle">
          <div >发放数量</div>
          <div class="chengenumber">{{list.couponCount}}</div>
        </div>

        <div class="chengetitle">
          <div >未核销</div>
          <div class="chengenumber">{{list.notWrittenOff}}</div>
        </div>

        <div class="chengetitle">
          <div >已核销</div>
          <div class="chengenumber">{{list.hasWritenOff}}</div>
        </div>

        <div class="chengetitle">
          <div >核销中</div>
          <div class="chengenumber">{{list.isWritenOff}}</div>
        </div>

        <div class="chengetitle">
          <div >已撤销</div>
          <div class="chengenumber">{{list.isCancel}}</div>
        </div>
      </div>

      <div class="screeningBox">
          
            <el-input v-model="input1" class="chengeinout" clearable placeholder="请输入券码查询"></el-input>
          
            <el-select v-model="input2" class="chengeinout" style="margin-right:50px" clearable placeholder="请选择状态">
                <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>

       
            <el-button class="chengebutton" @click="chengess" type="primary">搜索</el-button>
            <el-button class="chengebutton" @click="chengecz" type="primary">重置</el-button>


        </div>
      </div>
      
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :show-overflow-tooltip="true"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
           <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column  type="index" width="100" label="序号"></el-table-column>
        
          
           <el-table-column  property="code"  label="优惠券码"></el-table-column>
           <el-table-column  property="createTime"  label="创建时间"></el-table-column>
           <el-table-column  align="center"  label="状态" >
            <template slot-scope="scope">
              <div >{{scope.row.status == 1? '未核销':scope.row.status == 2? '已核销':scope.row.status == 3? '核销中':'已撤销'}}</div>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="size"
            :current-page.sync="page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>


      <el-dialog
        title="撤销"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <h3>确定撤销此优惠券吗？</h3>
        <span>撤销后将无法修改数据</span>


        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="chengeqrhx">确 定</el-button>
        </span>
    </el-dialog>


        <el-dialog
        title="下载优惠券码"
        :visible.sync="dialogVisible1"
        width="30%"
        :before-close="handleClose1">
       
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in options2" :label="city.value" :key="city.value">{{city.label}}</el-checkbox>
        </el-checkbox-group>

        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose1">取 消</el-button>
            <el-button type="primary" @click="chengeqrhx2">确 定</el-button>
        </span>
    </el-dialog>
    
       
    </div>
 
</template>

<script>
import {shrecord,coupontypeInfo,couponList,couponDelete,exportExcels} from "@/api/api";
import md5 from "js-md5";
const cityOptions = ['未核销', '核销中', '已核销', '已撤销'];
export default {
  name:'item-one',
  data: function() {
    return {
        userInfo:JSON.parse(sessionStorage.getItem('userInfo')),
        dialogVisible:false,
        dialogVisible1:false,
        merchantarr:[],
        list:{},
        page: 1,
        size: 10,
        total:100,
        input1:'',
        input2:'',
        input3:'',
        options2: [{
          value: '1',
          label: '未核销'
        },{
          value: '3',
          label: '核销中'
        },{
          value: '2',
          label: '已核销'
        },{
          value: '4',
          label: '已撤销'
        }],
        merchantId:0,

        ss:{},
     data1Map: new Map(),
     data2Map: new Map(),
     pickerMinDate: null,
     pickerMaxDate: null,
     day31: 31 * 24 * 3600 * 1000,
     pickerOptions1: {
        onPick: ({ maxDate, minDate }) => {
         if (minDate && this.pickerMinDate) {
           this.pickerMinDate = null;
         } else if (minDate) {
           this.pickerMinDate = minDate.getTime();
         }
       },
       disabledDate: (time) => {
         if (this.pickerMinDate) {
           return (time.getTime() > (this.pickerMinDate + this.day31)) || (time.getTime() < (this.pickerMinDate - this.day31));
         }
         return false;
       }
     },
      checkAll: false,
        checkedCities: ['1', '2', '3', '4'],
        cities: cityOptions,
        isIndeterminate: true

    };
  },
  created() {
    this.$store.dispatch("getNewNum", 6);
 


 

      this.changelist()
  

  },
  methods: {

    chengetotle(){
      shrecord({page:1,size:20}).then(res=>{
        
      })
  
    },
      merchantslist(queryString, cb) {

      

      let sosolist = {};
      sosolist = {
          page: 1,
          size: 20,
          merchantName: this.input2,
        };
      merchantlist(sosolist).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
           this.merchantarrlist = []
          for(var i=0;i<res.data.length;i++){
            this.merchantarrlist.push({'value':res.data[i].merchantName,'id':res.data[i].id})
          }
           let results = queryString
            ? this.merchantarrlist.filter(this.createFilter(queryString))
            : this.merchantarrlist;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },

    marid(item) {
      // console.log('tag', item,this.input2)
      this.merchantId = item.id;
     

    },
    allshops(queryString, cb) {
      // let allshope = this.allshop;
      let sosolist = {};

      sosolist = {
          page: 1,
          size: 20,
          merchantId: this.merchantId,
          // shopName: this.tarminal.shopName,
        };

        if(this.userInfo.rolesId == 5){
     
          sosolist = {
          page: 1,
          size: 20,
          merchantId:this.userInfo.mid,
          // shopName: this.tarminal.shopName,
        };
      }else if(this.userInfo.rolesId != 5 && this.userInfo.rolesId != 6){

          sosolist = {
          page: 1,
          size: 20,
          merchantId: this.merchantId,
          // shopName: this.tarminal.shopName,
        };
          
      }


      shopall(sosolist).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
           this.allshop = []
          for(var i=0;i<res.data.rows.length;i++){
            this.allshop.push({'value':res.data.rows[i].shopName,'id':res.data.rows[i].id})
          }
           let results = queryString
            ? this.allshop.filter(this.createFilter(queryString))
            : this.allshop;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    shopid(item) {
      // console.log(item,this.input3)

    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },

  

    //撤销
    chengecx(item){
    this.dialogVisible = true

    var date = new Date()
    var Y = date.getFullYear() + '-'
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
    var H = date.getHours() + ':'
    var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
    var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()

    var aa = Y + M + D + H + M2 + S

      this.ss ={
        coupon_code:item.couponCode,
        order_no:item.channelOrderNo,
        inst_no:'60000001',
        ts:aa,
        channel_type:item.channelType,
        is_all_refund_order:1,
        refund_amount:item.writeOffAmount,
        merchant_id:item.merchantId,
        shop_id:item.shopId
      }

    },

    //确认核销
    chengeqrhx(){

      writeoffCancel(this.ss).then(res=>{
        this.changelist()
        
      })
      console.log('tagsssss', this.ss)
      
      this.dialogVisible = false

    },

    //搜索
    chengess(){
      
    
      
      this.page =1
      let ss = {
        page:1,
        size:this.size,
        batchCode:this.list.batchCode,
        code:this.input1,
        status:this.input2,
     
      }
     
    couponList(ss).then(res=>{
          this.merchantarr = res.data.records
          this.total = res.data.total
        })


    },
    //重置
    chengecz(){
      this.page = 1
      this.size = 10
      this.input1=''
      this.input2=''
      this.input3=''
      this.changelist()
    
    },
    //查询详情
    async changelist(){
      const res = await coupontypeInfo({}, this.$route.query.id)
      this.list = res.data
      const result = await couponList({
        batchCode: this.list.batchCode,
        page: this.page,
        size: this.size
      })
      this.merchantarr = result.data.records
      console.log(this.merchantarr);
      this.total = result.data.total
      // coupontypeInfo({},this.$route.query.id).then(res=>{
      //   this.list = res.data
      //   couponList({batchCode:res.data.batchCode,page:this.page,size:this.size}).then(res=>{
      //     this.merchantarr = res.data.records
      //     this.total = res.data.total
      //   })

      },
    handleClose(){
        this.dialogVisible = false
    },
    handleClose1(){
        this.dialogVisible1 = false

    },
    //多选框
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val;
    },
      //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
     // 显示数量
    sizechange(val){

 


 
          this.size  = val
          this.page = 1

        let ss = {
        page:this.page,
        size:this.size,
        batchCode:this.list.batchCode,
        code:this.input1,
        status:this.input2,
     
      }
     
    couponList(ss).then(res=>{
          this.merchantarr = res.data.records
          this.total = res.data.total
        })



    },
    // 分页
    handleCurrentChange(val) {

        this.page  = val
          
        let ss = {
        page:this.page,
        size:this.size,
        batchCode:this.list.batchCode,
        code:this.input1,
        status:this.input2,
     
      }
     
    couponList(ss).then(res=>{
          this.merchantarr = res.data.records
          this.total = res.data.total
        })

    

    },
    // 下载
    merchantexcel(){
      // this.dialogVisible1 = true

      
      exportExcels({
      exportType:3,
      page:this.page,
      size:this.size,
      startTime:(this.list.createTime).substr(0,10) + ' 00:00:00',
      finishTime:(this.list.createTime).substr(0,10)+ ' 23:59:59',
      batchCode:this.list.batchCode,
      code:this.input1,
      status:this.input2,
      }).then(res=>{
      if(res.data.code == 200){
          this.$message({
          message: '下载成功',
          type: 'success'
        });
      }else{
        this.$message.error(res.data.message);
      }

      })
    },

    //下载确认
    chengeqrhx2(){
      this.dialogVisible1 = false
      console.log('tag', this.checkedCities)

      // exportExcels().then(res=>{

      // })
    },
 
    // 跳转核销记录
    joinexportlist(){
      this.$router.push('/VerificationRecords');
    },
    joinexportlist1(){
      this.$router.push('/yhqexportlist');
    },
    handleCheckAllChange(val) {
       console.log('tag', val)
        if(val){
          this.checkedCities = ['1', '2', '3', '4']
        }else{
          this.checkedCities = []
        }
        this.isIndeterminate = false;
      },
    handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
  },
     watch: {
            $route() {
            //解决方法监听路由变化并执行相应方法即可
             
                if (this.$route.query.ishit == undefined) {
                     
                        this.changelist()
                    // this.isshowModel = true
                    // this.domainlist = []
                    // this.listdata(this.$store.state.keyword, this.$route.query.ishit);
                } else {
                      
                    // this.listdata(this.$store.state.keyword, this.$route.query.ishit);
                }
            },
        },
};
</script>
<style scoped>
.red{
  color: red;
}
.chengeinout{
    width: 280px;
    margin-right: 20px;
    margin-bottom: 10px;
}
.chengebutton{
    margin-left: 30px;
    padding: 0 30px;
}


.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename{
  width: 60%;
}
.servicelevel{
  width: 20%;
}
.width20{
    width: 20%;
}
.width30{
    width: 30%;
}
.red {
  color: #f9607d;
}
.stitle{
    padding: 5px 0;
    font-size: 18px;
}
.statistical {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
 
}
.statisticalitem{
  width: 30%;

}

.BDname{
  width: 20%;
}
.width60{
  width: 40%;
}
.yuan{
  color: #C1C5CB;
  font-size: 12px;
  position: relative;
  left: -20px;
}
.green{
  background: #97C05C;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.orange{
  background: #F29C38;
  color: #fff;
   padding: 0 5px;
  border-radius: 10px;
}
.hui{
  background: #888888;
  color: #fff;
   padding: 0 5px;
  border-radius: 10px;
}
.reds{
  background: #D3362F;
  color: #fff;
   padding: 0 5px;
  border-radius: 10px;
}
.blue{
  background: #4154AF !important;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.chengeflex{
  display: flex;

}
.chengeleft{
  width: 30%;
  margin-right: 10%;
  text-align: right;
}
.chengeright{
  width: 60%;
  text-align: left;
  overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.chengeright1{
  width: 60%;
}

.statisticalss {
  width: 100%;
  margin-bottom: 20px;
  display: flex;

  justify-content: space-around;
 
}
.chengetitle{
  background-color: rgba(242, 242, 242, 1);
  width: 18%;
  height: 60px;
  text-align: center;
  padding-top: 5px;
}
.chengenumber{
  font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
}

.chengestore1{
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: rgba(242, 242, 242, 1);
}
.chengestore2{
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: rgba(64, 158, 255, 0.4980392156862745);
}
.chengestore3{
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: rgba(170, 170, 170, 0.4980392156862745);
}

</style>